<template>
  <el-dialog
      title="详情"
      :visible.sync="visible"
      width="60%">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>店铺信息</span>
        </div>
       <el-descriptions class="margin-top" :column="2" size="medium">
        <el-descriptions-item label="商店名称">
          {{shop.name}}
        </el-descriptions-item>
        <el-descriptions-item label="店长唯一ID">
          {{shop.manageId}}
        </el-descriptions-item>
        <el-descriptions-item label="商店地址">
          {{shop.location}}
        </el-descriptions-item>
        <el-descriptions-item label="所属校区">
                   {{filtersSchool(shop.schoolId)}}
        </el-descriptions-item>
        <el-descriptions-item label="商店状态">
                   {{filtersStatus(shop.status) }}
        </el-descriptions-item>
        <el-descriptions-item label="营业时间">
          {{shop.openTime}}
        </el-descriptions-item>
        <el-descriptions-item label="是否营业">
           {{shop.isOpen == 1 ? '是':'否'}}
        </el-descriptions-item>
        <el-descriptions-item label="商店自述">
          {{shop.selfExpression}}
        </el-descriptions-item>
        <el-descriptions-item label="商店当前状态原因">
          {{shop.reason}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never">
        <div slot="header" class="clearfix" style="display: flex;align-items: center;">
         <span>商品信息</span>
          <div style="flex: 1;text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addGoods(true)">新增商品</el-button>
            <el-button type="danger" :disabled="multipleSelection.length === 0" icon="el-icon-delete" size="mini" @click="balcaDel">批量删除</el-button>
          </div>
      </div>
            <el-alert
      v-if="msg"
    :title="msg"
    type="success">
  </el-alert>
       <el-table
      ref="tableSort"
      :data="goodsData"
      @selection-change="handleSelectionChange">
             <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column prop="imgUrl" label="商品图片">
        <template #default="{ row }">
           <viewer>
            <img :src="row.imgUrl" style="width:60px;"></img>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="商品名称" prop="name"/>
      <el-table-column show-overflow-tooltip label="商品价格(分)" prop="price"/>
            <el-table-column label="操作" width="80px">
        <template #default="{ row }">
          <el-button type="text" @click="addGoods(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
      <GoodsAdd ref="createGoodsAdd" @onOk="goodsList"></GoodsAdd>
    </el-dialog>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
import {setMerchantShopDetail} from '@/api/merchant/shop_api.js'
import {getMerchantGoodsPage,merchantGoodsBatchDel} from '@/api/merchant/goods_api.js'
import GoodsAdd from '@/components/VabMerchant/goodsAdd'
export default {
  name: 'shopDetail',
  components: {
    GoodsAdd
  },
  setup(props, { emit }) {
   // const emits = defineEmits(['onOk'])
    const Interface = reactive({
      async shopDetail(row){
        query.shop = row
        Interface.shopinfo()
        Interface.goodsList()
      },
      async shopinfo(){
        let params = {}
        params.shopId = query.shop.id
        const {code,data} = await setMerchantShopDetail(params)
        if(code === 0){
          query.visible = true
        }
      },
      async goodsList(){
        let params = {}
        params.shopId = query.shop.id
        params.schoolId = query.shop.schoolId
        params.name = query.name
        params.pageSize = query.pageSize
        params.currentPage = query.currentPage
       const {code,data} = await getMerchantGoodsPage(params)
        if(code === 0){
          query.goodsData = data.goods
          query.total = data.total
        }
      },
      handleSizeChange(val) {
        query.pageSize = val
        Interface.goodsList()
      },
      handleCurrentChange(val) {
        query.currentPage = val
        Interface.goodsList()
      },
      formatTime(row, column){
        let data = row[column.property]
        let dtime = new Date(data)
        const year = dtime.getFullYear()
        let month = dtime.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        let day = dtime.getDate()
        if (day < 10) {
          day = '0' + day
        }
        return year+ '-' + month+ '-' + day
      },
      filtersStatus(status){
        if(!status)return
        return query.shopStatusData.find(v=>v.value === status).label
      },
      filtersSchool(schoolId){
        if(!schoolId)return
        return query.schoolData.find(v=>v.schoolId === schoolId).schoolName
      },

       addGoods(row){
        let params = {type:8}
        store.dispatch('baseStore/setQiniuToken',params)
        createGoodsAdd.value.goodsOpen(this.shop,row)
      },
      handleSelectionChange(val){
        query.multipleSelection = val;
        if(val.length > 0){
          query.msg = '已选中'+val.length+'条'
        }else{
          query.msg = ''
        }
      },
      async balcaDel(){
        if(query.multipleSelection.length === 0){
          return Message.error('请勾选删除商品！')
        }
        let params = {}
        params.shopId = query.shop.id
        params.goodsIds = query.multipleSelection.map(v=>v.id)
        const {code} = await merchantGoodsBatchDel(params)
        if(code === 0){
          Message.success('操作成功！')
          query.msg = ''
          tableSort.value.clearSelection()
          query.multipleSelection = []
          Interface.goodsList()
        }
      }
    })
    const createGoodsAdd = ref(null)
    const tableSort = ref(null)
    const query = reactive({
      multipleSelection:[],
      shopStatusData:computed(() => store.getters['baseStore/shopStatusData']),
      schoolData:computed(() => store.getters['baseStore/schoolData']),
      msg:'',
      visible:false,
      shop:{},
      goodsData:[],
      total:0,
      name:'',
      pageSize:10,
      currentPage:1
    })
    return {
      tableSort,
      createGoodsAdd,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>